<template>
  <!-- 左侧导航栏 -->
  <div>
    <!-- 顶部标题栏 -->
    <van-nav-bar
      title="黑马优购"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
      placeholder=""
      fixed
      style="background-color:red;color:#fff"
    />
    <van-row type="flex">
      <!-- 侧边栏 -->
      <div style="margin-top:46px; height: 800px;overflow: auto;" class="left">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item :title="item.cat_name" v-for="(item ,i) in ClassList" :key="i"/>
        </van-sidebar>
      </div>
      <!-- 展示 -->
      <div class="right" style="margin-top:46px;width:100%;height: 800px;overflow: auto;">
        <!-- 商品分类名称 -->
        <van-row v-for="(item,i) in ClassList.length && ClassList[activeKey].children" :key="i">
          <van-row type="flex" justify="center">/{{item.cat_name}}/</van-row>
          <van-row>
            <template>
              <!-- 商品分类数据 -->
              <van-grid :border="false" :column-num="3" square gutter="20">
                <van-grid-item
                  v-for="(item2,i) in item.children"
                  :key="i"
                  @click="goGoodList(item2.cat_id)"
                >
                  <van-image :src="item2.cat_icon"/>
                  <span style="font-size:12px;color:#3c3c3c">{{item2.cat_name}}</span>
                </van-grid-item>
              </van-grid>
            </template>
          </van-row>
        </van-row>
      </div>
    </van-row>
    <!-- 底部区域 -->
    <van-tabbar v-model="active" fixed border="" z-index="1" route>
      <van-tabbar-item replace to="/home" icon="wap-home-o">首页</van-tabbar-item>
      <van-tabbar-item replace to="/class" icon="apps-o">分类</van-tabbar-item>
      <van-tabbar-item replace to="/search" icon="search">搜索</van-tabbar-item>
      <van-tabbar-item replace to="/shopping" icon="cart-o" :badge="$store.getters.getAllCount">购物车</van-tabbar-item>
      <van-tabbar-item replace to="/my" icon="contact">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeKey: "0",
      ClassList: [],
      active: ""
    };
  },
  created() {
    this.getClassList();
  },
  methods: {
    //请求分类列表数据
    async getClassList() {
      const res = await this.$http.get(`categories`);
      console.log(res);

      this.ClassList = res.message;
    },
    //点击具体商品分类触发
    goGoodList(cat_id) {
      this.$router.push(`goodslist/?cid=${cat_id}`);
    }
  }
};
</script>

<style lang="less" scoped>
.left::-webkit-scrollbar {
  display: none;
}
.right::-webkit-scrollbar {
  display: none;
}

.van-row--justify-center {
  height: 47px;
  line-height: 47px;
  text-align: center;
  font-size: 13px;
  color: #3c3c3c;
}
.van-nav-bar__title,
.van-nav-bar__text,
.van-icon-arrow-left::before {
  color: #fff;
  text-align: center;
}
</style>